<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <title>my-typography/src/Base.js - Documentation</title>
    
    
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <script src="scripts/nav.js" defer></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav >
    
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Outline.html">Outline</a></li><li><a href="Tag.html">Tag</a></li><li><a href="TagCanvas.html">TagCanvas</a></li></ul><h3>Modules</h3><ul><li><a href="module-$ui_components_my-affix.html">$ui/components/my-affix</a></li><li><a href="module-$ui_components_my-anchor.html">$ui/components/my-anchor</a></li><li><a href="module-$ui_components_my-autocomplete.html">$ui/components/my-autocomplete</a></li><li><a href="module-$ui_components_my-avatar.html">$ui/components/my-avatar</a></li><li><a href="module-$ui_components_my-avatars.html">$ui/components/my-avatars</a></li><li><a href="module-$ui_components_my-back-top.html">$ui/components/my-back-top</a></li><li><a href="module-$ui_components_my-capture.html">$ui/components/my-capture</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-capture.html#~_renderImg">_renderImg</a></li></ul></li><li><a href="module-$ui_components_my-card-list.html">$ui/components/my-card-list</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-card-list.html#~refresh">refresh</a></li></ul></li><li><a href="module-$ui_components_my-cascader.html">$ui/components/my-cascader</a></li><li><a href="module-$ui_components_my-checkbox.html">$ui/components/my-checkbox</a></li><li><a href="module-$ui_components_my-clipboard.html">$ui/components/my-clipboard</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-clipboard.html#~copy">copy</a></li></ul></li><li><a href="module-$ui_components_my-color-picker.html">$ui/components/my-color-picker</a></li><li><a href="module-$ui_components_my-contextmenu.html">$ui/components/my-contextmenu</a></li><li><a href="module-$ui_components_my-corner-mark.html">$ui/components/my-corner-mark</a></li><li><a href="module-$ui_components_my-crud.html">$ui/components/my-crud</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-crud.html#~openAddDialog">openAddDialog</a></li><li data-type='method'><a href="module-$ui_components_my-crud.html#~refresh">refresh</a></li><li data-type='method'><a href="module-$ui_components_my-crud.html#~reload">reload</a></li></ul></li><li><a href="module-$ui_components_my-date.html">$ui/components/my-date</a></li><li><a href="module-$ui_components_my-date-picker.html">$ui/components/my-date-picker</a></li><li><a href="module-$ui_components_my-description.html">$ui/components/my-description</a></li><li><a href="module-$ui_components_my-detail.html">$ui/components/my-detail</a></li><li><a href="module-$ui_components_my-detail-item.html">$ui/components/my-detail-item</a></li><li><a href="module-$ui_components_my-dialog.html">$ui/components/my-dialog</a></li><li><a href="module-$ui_components_my-drag.html">$ui/components/my-drag</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-drag.html#~getRelativeEl">getRelativeEl</a></li></ul></li><li><a href="module-$ui_components_my-drop.html">$ui/components/my-drop</a></li><li><a href="module-$ui_components_my-edit-tags.html">$ui/components/my-edit-tags</a></li><li><a href="module-$ui_components_my-editor.html">$ui/components/my-editor</a></li><li><a href="module-$ui_components_my-empty.html">$ui/components/my-empty</a></li><li><a href="module-$ui_components_my-filter.html">$ui/components/my-filter</a></li><li><a href="module-$ui_components_my-fixed.html">$ui/components/my-fixed</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-fixed.html#~resize">resize</a></li></ul></li><li><a href="module-$ui_components_my-flex.html">$ui/components/my-flex</a></li><li><a href="module-$ui_components_my-flex-item.html">$ui/components/my-flex-item</a></li><li><a href="module-$ui_components_my-flip.html">$ui/components/my-flip</a></li><li><a href="module-$ui_components_my-float.html">$ui/components/my-float</a></li><li><a href="module-$ui_components_my-float-item.html">$ui/components/my-float-item</a></li><li><a href="module-$ui_components_my-form.html">$ui/components/my-form</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-form.html#~reset">reset</a></li><li data-type='method'><a href="module-$ui_components_my-form.html#~submit">submit</a></li></ul></li><li><a href="module-$ui_components_my-form_src_Base.html">$ui/components/my-form/src/Base</a></li><li><a href="module-$ui_components_my-form_src_common_TagInput.html">$ui/components/my-form/src/common/TagInput</a></li><li><a href="module-$ui_components_my-form_src_common_TagSelect.html">$ui/components/my-form/src/common/TagSelect</a></li><li><a href="module-$ui_components_my-form_src_common_TreeSelect.html">$ui/components/my-form/src/common/TreeSelect</a></li><li><a href="module-$ui_components_my-header.html">$ui/components/my-header</a></li><li><a href="module-$ui_components_my-highlight.html">$ui/components/my-highlight</a></li><li><a href="module-$ui_components_my-icon.html">$ui/components/my-icon</a></li><li><a href="module-$ui_components_my-im-wall.html">$ui/components/my-im-wall</a></li><li><a href="module-$ui_components_my-input.html">$ui/components/my-input</a></li><li><a href="module-$ui_components_my-input-number.html">$ui/components/my-input-number</a></li><li><a href="module-$ui_components_my-layout.html">$ui/components/my-layout</a></li><li><a href="module-$ui_components_my-lazy.html">$ui/components/my-lazy</a></li><li><a href="module-$ui_components_my-list.html">$ui/components/my-list</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-list.html#~load">load</a></li><li data-type='method'><a href="module-$ui_components_my-list.html#~refresh">refresh</a></li><li data-type='method'><a href="module-$ui_components_my-list.html#~reset">reset</a></li><li data-type='method'><a href="module-$ui_components_my-list.html#~scrollTop">scrollTop</a></li></ul></li><li><a href="module-$ui_components_my-location-picker.html">$ui/components/my-location-picker</a></li><li><a href="module-$ui_components_my-login.html">$ui/components/my-login</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-login.html#~submit">submit</a></li></ul></li><li><a href="module-$ui_components_my-marquee.html">$ui/components/my-marquee</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-marquee.html#~pause">pause</a></li><li data-type='method'><a href="module-$ui_components_my-marquee.html#~start">start</a></li><li data-type='method'><a href="module-$ui_components_my-marquee.html#~stop">stop</a></li></ul></li><li><a href="module-$ui_components_my-master-app.html">$ui/components/my-master-app</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-master-app.html#~initState">initState</a></li><li data-type='method'><a href="module-$ui_components_my-master-app.html#~onStateChange">onStateChange</a></li><li data-type='method'><a href="module-$ui_components_my-master-app.html#~onStateChange">onStateChange</a></li><li data-type='method'><a href="module-$ui_components_my-master-app.html#~setState">setState</a></li></ul></li><li><a href="module-$ui_components_my-menu.html">$ui/components/my-menu</a></li><li><a href="module-$ui_components_my-micro-app.html">$ui/components/my-micro-app</a></li><li><a href="module-$ui_components_my-navbar.html">$ui/components/my-navbar</a></li><li><a href="module-$ui_components_my-navbar-FullScreenAction.html">$ui/components/my-navbar-FullScreenAction</a></li><li><a href="module-$ui_components_my-navbar-IconAction.html">$ui/components/my-navbar-IconAction</a></li><li><a href="module-$ui_components_my-navbar-UserAction.html">$ui/components/my-navbar-UserAction</a></li><li><a href="module-$ui_components_my-number.html">$ui/components/my-number</a></li><li><a href="module-$ui_components_my-panel.html">$ui/components/my-panel</a></li><li><a href="module-$ui_components_my-paragraph.html">$ui/components/my-paragraph</a></li><li><a href="module-$ui_components_my-pro.html">$ui/components/my-pro</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-pro.html#~addTab">addTab</a></li><li data-type='method'><a href="module-$ui_components_my-pro.html#~closeTabs">closeTabs</a></li><li data-type='method'><a href="module-$ui_components_my-pro.html#~setTab">setTab</a></li></ul></li><li><a href="module-$ui_components_my-promise.html">$ui/components/my-promise</a></li><li><a href="module-$ui_components_my-radial-menu.html">$ui/components/my-radial-menu</a></li><li><a href="module-$ui_components_my-radio.html">$ui/components/my-radio</a></li><li><a href="module-$ui_components_my-range.html">$ui/components/my-range</a></li><li><a href="module-$ui_components_my-rate.html">$ui/components/my-rate</a></li><li><a href="module-$ui_components_my-resize.html">$ui/components/my-resize</a></li><li><a href="module-$ui_components_my-result.html">$ui/components/my-result</a></li><li><a href="module-$ui_components_my-revolve.html">$ui/components/my-revolve</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-revolve.html#~next">next</a></li><li data-type='method'><a href="module-$ui_components_my-revolve.html#~prev">prev</a></li><li data-type='method'><a href="module-$ui_components_my-revolve.html#~start">start</a></li><li data-type='method'><a href="module-$ui_components_my-revolve.html#~stop">stop</a></li></ul></li><li><a href="module-$ui_components_my-search-box.html">$ui/components/my-search-box</a></li><li><a href="module-$ui_components_my-select.html">$ui/components/my-select</a></li><li><a href="module-$ui_components_my-sidebar.html">$ui/components/my-sidebar</a></li><li><a href="module-$ui_components_my-skeleton.html">$ui/components/my-skeleton</a></li><li><a href="module-$ui_components_my-slider.html">$ui/components/my-slider</a></li><li><a href="module-$ui_components_my-sortable.html">$ui/components/my-sortable</a></li><li><a href="module-$ui_components_my-spin.html">$ui/components/my-spin</a></li><li><a href="module-$ui_components_my-stat-card.html">$ui/components/my-stat-card</a></li><li><a href="module-$ui_components_my-switch.html">$ui/components/my-switch</a></li><li><a href="module-$ui_components_my-table.html">$ui/components/my-table</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-table.html#~refresh">refresh</a></li></ul></li><li><a href="module-$ui_components_my-tabs.html">$ui/components/my-tabs</a></li><li><a href="module-$ui_components_my-tag-canvas.html">$ui/components/my-tag-canvas</a></li><li><a href="module-$ui_components_my-tag-input.html">$ui/components/my-tag-input</a></li><li><a href="module-$ui_components_my-tag-select.html">$ui/components/my-tag-select</a></li><li><a href="module-$ui_components_my-text.html">$ui/components/my-text</a></li><li><a href="module-$ui_components_my-timer.html">$ui/components/my-timer</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-timer.html#~reset">reset</a></li><li data-type='method'><a href="module-$ui_components_my-timer.html#~start">start</a></li><li data-type='method'><a href="module-$ui_components_my-timer.html#~stop">stop</a></li></ul></li><li><a href="module-$ui_components_my-title.html">$ui/components/my-title</a></li><li><a href="module-$ui_components_my-tree-select.html">$ui/components/my-tree-select</a></li><li><a href="module-$ui_components_my-typography.html">$ui/components/my-typography</a></li><li><a href="module-$ui_components_my-water-fall.html">$ui/components/my-water-fall</a></li><li><a href="module-$ui_components_my-watermark.html">$ui/components/my-watermark</a></li><li><a href="module-$ui_components_my-wave.html">$ui/components/my-wave</a></li><li><a href="module-$ui_components_my-wrapper.html">$ui/components/my-wrapper</a></li><li><a href="module-widgets_my-print.html">widgets/my-print</a></li></ul><h3>Events</h3><ul><li><a href="module-$ui_components_my-stat-card.html#~event:action">action</a></li><li></li><li><a href="module-$ui_components_my-form_src_common_TagInput.html#~event:add">add</a></li><li><a href="module-$ui_components_my-wrapper.html#~event:back">back</a></li><li><a href="module-$ui_components_my-dialog.html#~event:cancel">cancel</a></li><li><a href="module-$ui_components_my-typography.html#~event:change">change</a></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-radial-menu.html#~event:click">click</a></li><li></li><li></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-avatars.html#~event:click-add">click-add</a></li><li><a href="module-$ui_components_my-avatars.html#~event:click-item">click-item</a></li><li><a href="module-$ui_components_my-avatars.html#~event:click-more">click-more</a></li><li><a href="module-$ui_components_my-radial-menu.html#~event:close">close</a></li><li></li><li><a href="module-$ui_components_my-pro.html#~event:collapse">collapse</a></li><li><a href="module-$ui_components_my-form_src_common_TagSelect.html#~event:collapsed">collapsed</a></li><li><a href="module-$ui_components_my-table.html#~event:column-change">column-change</a></li><li><a href="module-$ui_components_my-navbar-UserAction.html#~event:command">command</a></li><li></li><li></li><li><a href="global.html#event:complete">complete</a></li><li></li><li><a href="module-$ui_components_my-typography.html#event:copy">copy</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-drag.html#~event:drag">drag</a></li><li></li><li><a href="module-$ui_components_my-dialog.html#~event:drag-start">drag-start</a></li><li><a href="module-$ui_components_my-dialog.html#~event:drag-stop">drag-stop</a></li><li><a href="module-$ui_components_my-drop.html#~event:drop">drop</a></li><li><a href="module-$ui_components_my-typography.html#event:edited">edited</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-typography.html#event:editing">editing</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-drop.html#~event:enter">enter</a></li><li><a href="module-$ui_components_my-table.html#~event:error">error</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-typography.html#event:expand">expand</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-timer.html#~event:finish">finish</a></li><li><a href="module-$ui_components_my-dialog.html#~event:hide">hide</a></li><li><a href="module-$ui_components_my-lazy.html#~event:init">init</a></li><li><a href="module-$ui_components_my-form_src_common_TagInput.html#~event:input-change">input-change</a></li><li><a href="module-$ui_components_my-drop.html#~event:leave">leave</a></li><li><a href="module-$ui_components_my-wrapper.html#~event:link-click">link-click</a></li><li><a href="module-$ui_components_my-dialog.html#~event:load">load</a></li><li><a href="module-$ui_components_my-revolve.html#~event:loaded">loaded</a></li><li><a href="module-$ui_components_my-dialog.html#~event:maximize">maximize</a></li><li><a href="module-$ui_components_my-im-wall.html#~event:on-added">on-added</a></li><li><a href="module-$ui_components_my-capture.html#~event:on-capture">on-capture</a></li><li><a href="global.html#event:on-change">on-change</a></li><li><a href="module-$ui_components_my-tag-canvas.html#~event:on-click">on-click</a></li><li><a href="module-$ui_components_my-capture.html#~event:on-output">on-output</a></li><li><a href="module-$ui_components_my-radial-menu.html#~event:open">open</a></li><li></li><li><a href="module-$ui_components_my-drop.html#~event:over">over</a></li><li><a href="global.html#~event:page-change">page-change</a></li><li></li><li></li><li><a href="module-$ui_components_my-login.html#~event:pki">pki</a></li><li><a href="module-$ui_components_my-revolve.html#~event:progress">progress</a></li><li><a href="module-$ui_components_my-form_src_common_TagInput.html#~event:remove">remove</a></li><li><a href="module-$ui_components_my-timer.html#~event:reset">reset</a></li><li></li><li><a href="module-$ui_components_my-resize.html#~event:resize">resize</a></li><li></li><li><a href="module-$ui_components_my-dialog.html#~event:resize-start">resize-start</a></li><li><a href="module-$ui_components_my-dialog.html#~event:resize-stop">resize-stop</a></li><li><a href="module-$ui_components_my-search-box.html#~event:search">search</a></li><li><a href="module-$ui_components_my-sidebar.html#~event:select">select</a></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-dialog.html#~event:show">show</a></li><li><a href="global.html#~event:size-change">size-change</a></li><li></li><li></li><li><a href="module-$ui_components_my-timer.html#~event:start">start</a></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-timer.html#~event:stop">stop</a></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-login.html#~event:submit">submit</a></li><li></li><li></li><li><a href="module-$ui_components_my-table.html#~event:success">success</a></li><li></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-panel.html#~event:tab-change">tab-change</a></li><li><a href="module-$ui_components_my-pro.html#~event:tab-remove">tab-remove</a></li><li><a href="module-$ui_components_my-pro.html#~event:tab-select">tab-select</a></li><li><a href="module-$ui_components_my-timer.html#~event:tick">tick</a></li><li><a href="module-$ui_components_my-form.html#~event:validate">validate</a></li><li><a href="module-widgets_my-back-top.html#event:click">click</a></li></ul><h3>Global</h3><ul><li><a href="global.html#AddShadowToImage">AddShadowToImage</a></li><li><a href="global.html#appendChildNode">appendChildNode</a></li><li><a href="global.html#createEllipsisContainer">createEllipsisContainer</a></li><li><a href="global.html#createEllipsisContentHolder">createEllipsisContentHolder</a></li><li><a href="global.html#destroyVue">destroyVue</a></li><li><a href="global.html#getData">getData</a></li><li><a href="global.html#inRange">inRange</a></li><li><a href="global.html#instanceVue">instanceVue</a></li><li><a href="global.html#props">props</a></li><li><a href="global.html#pxToNumber">pxToNumber</a></li><li><a href="global.html#removeEllipsisContainer">removeEllipsisContainer</a></li><li><a href="global.html#RoundImage">RoundImage</a></li><li><a href="global.html#scrollTop">scrollTop</a></li><li><a href="global.html#setData">setData</a></li><li><a href="global.html#styleToString">styleToString</a></li><li><a href="global.html#wrapperDecorations">wrapperDecorations</a></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">my-typography/src/Base.js</h1>
    

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>/**
 * 基础文本组件
 */
import {MyClipboard, MyIcon} from '$ui'
import {Tooltip, Input} from 'element-ui'
import isStyleSupport from '$ui/utils/styleChecker'
import {addResizeListener, removeResizeListener} from 'element-ui/lib/utils/resize-event'
import Editable from './Editable'
import ellipsisHelper from './ellipsis'

// 是否支持CSS多行文本省略号
const isLineClampSupport = isStyleSupport('webkitLineClamp')

// 是否支持CSS单行文本省略号
const isTextOverflowSupport = isStyleSupport('textOverflow')

const ELLIPSIS_STR = '...'

/**
 * 添加包裹容器
 * @param h
 * @param blocks
 * @param content
 * @return {*}
 */
function wrapperDecorations(h, blocks, content) {
  let currentContent = content;
  const {mark, code, underline, del, strong, pre} = blocks

  function wrap(needed, tag) {
    if (!needed) return;

    currentContent = h(tag, {}, [].concat(currentContent));
  }

  wrap(pre, 'pre')
  wrap(strong, 'strong')
  wrap(underline, 'u')
  wrap(del, 'del')
  wrap(code, 'code')
  wrap(mark, 'mark')

  return currentContent
}

// 获取虚拟节点的文本
function getInnerText(children = []) {
  let texts = []
  children.forEach(node => {
    if (node.children) {
      texts = texts.concat(getInnerText(node.children))
    }
    if (node.text) {
      texts.push(node.text)
    }
  })
  return texts.join('')
}


export default {
  components: {
    MyClipboard,
    MyIcon,
    Tooltip,
    Input,
    Editable
  },
  /**
   * 属性参数
   * @member props
   * @property {String} [tag=article] 生成标签名称
   * @property {VNode[]} [children] 内容虚拟DOM
   * @property {Boolean} [copyable=false] 是否可拷贝
   * @property {String} [copyText] 复制文本内容, 默认取虚拟DOM的innerText
   * @property {Boolean} [delete=false] 添加删除线样式
   * @property {Boolean} [disabled=false] 禁用文本样式
   * @property {Boolean} [editable=false] 是否可编辑
   * @property {Boolean} [ellipsis=false] 设置自动溢出省略
   * @property {Number} [rows=1] 超出几行显示省略， ellipsis true 有效
   * @property {Boolean} [expandable=false] 显示展开按钮 ellipsis true 有效
   * @property {Boolean|Object} [tooltip] 显示tooltip，ellipsis true 有效
   * @property {Boolean} [mark=false] 添加标记样式
   * @property {Boolean} [underline=false] 添加下划线样式
   * @property {Boolean} [code=false] 添加引用样式
   * @property {Boolean} [strong=false] 是否加粗
   * @property {Boolean} [pre=false] 保留格式
   * @property {Boolean} [small=false] 字体变小
   * @property {String} [type] 文本类型 '', 'primary', 'secondary', 'warning', 'danger'
   */
  props: {
    tag: {
      type: String,
      default: 'article'
    },
    children: {
      type: Array
    },
    // 是否可拷贝
    copyable: Boolean,
    // 复制文本内容
    copyText: String,
    // 添加删除线样式
    delete: Boolean,
    // 禁用文本
    disabled: Boolean,
    // 是否可编辑
    editable: Boolean,
    // 设置自动溢出省略
    ellipsis: Boolean,
    // ellipsis true 有效
    rows: {
      type: Number,
      default: 1
    },
    // ellipsis true 有效
    expandable: Boolean,
    // 显示tooltip，ellipsis true 有效, 设置tooltip后，expandable 将失效
    tooltip: [Boolean, Object],
    // 添加标记样式
    mark: Boolean,
    // 添加下划线样式
    underline: Boolean,
    code: Boolean,
    strong: Boolean,
    pre: Boolean,
    small: Boolean,
    type: {
      type: String,
      default: '',
      validator(val) {
        return ['', 'primary', 'secondary', 'warning', 'danger'].includes(val)
      }
    }
  },
  data() {
    this.copyTimerId = null
    return {
      copied: false,
      editing: false,
      ellipsisContent: null,
      isEllipsis: false,
      expanded: false
    }
  },
  computed: {
    classes() {
      const cssEllipsis = this.canUseCSSEllipsis();
      const cssTextOverflow = this.rows === 1 &amp;&amp; cssEllipsis;
      const cssLineClamp = this.rows &amp;&amp; this.rows > 1 &amp;&amp; cssEllipsis;
      return {
        'my-typography': true,
        [`is-${this.type}`]: !!this.type,
        'is-disabled': this.disabled,
        'is-editing': this.editing,
        'is-ellipsis-single-line': (this.ellipsis &amp;&amp; cssTextOverflow),
        'is-ellipsis': (this.ellipsis &amp;&amp; cssLineClamp),
        'is-pointer': !!this.$listeners.click,
        'is-small': this.small
      }
    },
    styles() {
      const cssEllipsis = this.canUseCSSEllipsis();
      const cssLineClamp = this.rows &amp;&amp; this.rows > 1 &amp;&amp; cssEllipsis;
      if (cssLineClamp) {
        return {
          '-webkit-line-clamp': this.rows
        }
      }
      return null
    },
    copyIcon() {
      return this.copied ? 'el-icon-check' : 'el-icon-document-copy'
    }
  },
  watch: {
    children() {
      this.resizeOnNextFrame()
    }
  },
  methods: {
    // 检测是否可以用CSS实现省略号功能
    canUseCSSEllipsis() {
      // 如果有操作相关功能，就不能用css实现
      if (this.editable || this.copyable || this.expandable || this.tooltip) {
        return false
      }

      if (this.rows === 1) {
        return isTextOverflowSupport
      }
      return isLineClampSupport
    },
    getText() {
      return getInnerText(this.children)
    },
    setText(text) {
      if (this.children &amp;&amp; this.children[0]) {
        this.children[0].text = text
      }
    },
    getCopyText() {
      if (this.copyText) return this.copyText
      return this.getText()
    },
    handleCopy(e) {
      this.copied = true
      clearTimeout(this.copyTimerId)
      this.copyTimerId = setTimeout(() => {
        this.copied = false
      }, 3000)
      /**
       * 复制文字时触发
       * @event copy
       * @param {Object} 事件对象
       */
      this.$emit('copy', e)
    },
    handleEdit() {
      this.editing = true
      /**
       * 开始编辑时触发
       * @event editing
       */
      this.$emit('editing')
    },
    toggleExpand() {
      this.expanded = !this.expanded
      /**
       * 展开或收起时触发
       * @event expand
       * @param {Boolean} expanded 是否展开
       */
      this.$emit('expand', this.expanded)
    },
    handleEditorSave(text) {
      this.editing = false
      this.setText(text)
      /**
       * 编辑结束时触发
       * @event edited
       * @param {String} text 文本内容
       */
      this.$emit('edited', text)
      this.resizeOnNextFrame()
    },
    handleTextChange(text) {
      /**
       * 编辑文本改变时触发
       * @event change
       * @param {String} text 文本内容
       */
      this.$emit('change', text)
    },
    resizeOnNextFrame() {
      if (this.editing || !this.ellipsis) return
      this.$nextTick(() => {
        this.syncEllipsis()
      })
    },
    syncEllipsis() {
      if (!this.children || this.children.length === 0) return
      if (!this.rows || this.rows &lt; 0) return

      if (this.canUseCSSEllipsis()) return

      const {content, ellipsis} = ellipsisHelper(
        this.$el,
        this.rows,
        this.children,
        this.renderOperations()
      )

      this.ellipsisContent = content
      this.isEllipsis = ellipsis
    },
    renderCopy() {
      if (!this.copyable) return
      return (
        &lt;my-clipboard class="my-typography__copy"
                      tooltip
                      text={this.getCopyText}
                      onSuccess={this.handleCopy}>
          &lt;my-icon name={this.copyIcon}
                   class={{'my-typography__copy-icon': true, 'is-copied': this.copied}}>&lt;/my-icon>
        &lt;/my-clipboard>
      )
    },
    renderEdit() {
      if (!this.editable) return
      return (
        &lt;Tooltip class="my-typography__edit"
                 content="编辑"
                 placement="top">
        &lt;span>
          &lt;my-icon class="my-typography__edit-icon"
                   name="el-icon-edit"
                   onClick={this.handleEdit}>&lt;/my-icon>
        &lt;/span>
        &lt;/Tooltip>
      )
    },
    renderExpand() {
      if (!this.ellipsis || !this.expandable || this.tooltip) return
      if (!this.isEllipsis) return
      return (&lt;a class="my-typography__expand" onClick={this.toggleExpand}>{this.expanded ? '收起' : '展开'}&lt;/a>)
    },
    renderEditInput() {
      return (
        &lt;Editable value={this.getText()}
                  onChange={this.handleTextChange}
                  onSave={this.handleEditorSave}>&lt;/Editable>
      )
    },
    renderOperations() {
      return [this.renderExpand(), this.renderEdit(), this.renderCopy()].filter(vnode => vnode)
    },
    renderTooltip(h, vnode) {
      if (!this.ellipsis || !this.tooltip) return vnode
      if (!this.isEllipsis) return vnode
      const props = {
        content: this.getText(),
        placement: 'top',
        ...this.tooltip
      }

      return (
        &lt;Tooltip {...{props}}>{vnode}&lt;/Tooltip>
      )
    }
  },

  render(h) {
    // 编辑模式，渲染编辑器
    if (this.editing) {
      return h(this.tag, {class: this.classes}, [this.renderEditInput()])
    }
    let children = []
    // 需要js计算的显示省略号
    if (this.isEllipsis &amp;&amp; !this.expanded) {
      children = this.ellipsisContent.concat(ELLIPSIS_STR, this.renderOperations())
    } else {
      // 无省略号
      children = [].concat(
        wrapperDecorations(h, {
          strong: this.strong,
          mark: this.mark,
          underline: this.underline,
          del: this.delete,
          code: this.code,
          pre: this.pre
        }, this.children),
        this.renderOperations()
      )
    }
    const vnode = h(this.tag, {
      class: this.classes,
      style: this.styles
    }, children)
    return this.renderTooltip(h, vnode)
  },
  mounted() {
    if (this.ellipsis) {
      addResizeListener(this.tooltip ? this.$el.parentNode : this.$el, this.resizeOnNextFrame)
      this.resizeOnNextFrame()
    }
  },
  beforeDestroy() {
    clearTimeout(this.copyTimerId)
    if (this.ellipsis) {
      removeResizeListener(this.tooltip ? this.$el.parentNode : this.$el, this.resizeOnNextFrame)
    }
  }
}
</code></pre>
        </article>
    </section>





    
</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.6</a> on Wed Nov 18 2020 13:00:34 GMT+0800 (GMT+08:00) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>




<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?c4e5f73318b5cb0c389e3d9a05f831cc";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>
